<template>
    <div style="">

        <table class="mytable">

            <tr><td>基础用法</td><td>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </td></tr>

            <tr><td>禁用状态</td><td>
                <el-select v-model="value" disabled placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </td></tr>

            <tr><td>可清空单选</td><td>
                <el-select v-model="value" clearable placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </td></tr>

            <tr><td>基础多选</td><td>
                <el-select v-model="value" multiple placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </td></tr>

            <tr><td>基础多选(合并)</td><td>
                <el-select v-model="value" multiple collapse-tags placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </td></tr>

            <tr><td>自定义模板</td><td>
                <el-select v-model="value" multiple collapse-tags placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        <button style="float: left">{{ item.label }}</button>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                </el-select>
            </td></tr>

            <tr><td>分组</td><td>
                <el-select v-model="value" placeholder="请选择">
                    <el-option-group
                            v-for="group in city"
                            :key="group.label"
                            :label="group.label">
                        <el-option
                                v-for="item in group.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-option-group>
                </el-select>
            </td></tr>

            <tr><td>可搜索</td><td>
                <el-select v-model="value" multiple collapse-tags filterable placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </td></tr>

            <tr><td>远程搜索</td><td>
                <el-select
                        v-model="remoteValue"
                        multiple
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入关键词"
                        :remote-method="remoteMethod"
                        :loading="remoteLoading">
                    <el-option
                            v-for="item in remoteOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </td></tr>

        </table>


    </div>

</template>

<style>
    .mytable {
        width: 100%;
        border: 1px dotted black;
    }

    .mytable tr td {
        border: 1px dotted black;
    }

    .mytable tr td:first-child {
        width: 25%;
    }

    .el-select {
        width: 100%;
    }
</style>

<script>
    let id = 0;

    export default {
        name: "index.vue",
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                city: [{
                    label: '热门城市',
                    options: [{
                        value: 'Shanghai',
                        label: '上海'
                    }, {
                        value: 'Beijing',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options: [{
                        value: 'Chengdu',
                        label: '成都'
                    }, {
                        value: 'Shenzhen',
                        label: '深圳'
                    }, {
                        value: 'Guangzhou',
                        label: '广州'
                    }, {
                        value: 'Dalian',
                        label: '大连'
                    }]
                }],
                value: '',
                remoteOptions: [],
                remoteValue: [],
                remoteList:[],
                remoteLoading: false,
                remoteStates: ["Alabama", "Alaska", "Arizona",
                    "Arkansas", "California", "Colorado",
                    "Connecticut", "Delaware", "Florida",
                    "Georgia", "Hawaii", "Idaho", "Illinois",
                    "Indiana", "Iowa", "Kansas", "Kentucky",
                    "Louisiana", "Maine", "Maryland",
                    "Massachusetts", "Michigan", "Minnesota",
                    "Mississippi", "Missouri", "Montana",
                    "Nebraska", "Nevada", "New Hampshire",
                    "New Jersey", "New Mexico", "New York",
                    "North Carolina", "North Dakota", "Ohio",
                    "Oklahoma", "Oregon", "Pennsylvania",
                    "Rhode Island", "South Carolina",
                    "South Dakota", "Tennessee", "Texas",
                    "Utah", "Vermont", "Virginia",
                    "Washington", "West Virginia", "Wisconsin",
                    "Wyoming"]
            }
        },
        mounted() {
            this.remoteList = this.remoteStates.map(item => {
                return { value: `${item}`, label: `${item}` };
            });
        },
        methods:{
            remoteMethod(query) {
                if (query !== '') {
                    this.remoteLoading = true;
                    setTimeout(() => {
                        this.remoteLoading = false;
                        this.remoteOptions = this.remoteList.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 200);
                } else {
                    this.remoteOptions = [];
                }
            }
        }
    }

</script>
